<template>
	<view class="goods">
		<image :src="src"></image>
		<view class="flex">
			<view class="name">
				<view v-if="name">{{name}}</view>
				<slot name="title" v-else></slot>
			</view>
			<view class="price">
				￥{{price}}
			</view>
		</view>
		<view class="descript">
			<view v-if="des">{{des}}</view>
			<slot name="des" v-else></slot>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			name: {
				type: String,
				required: true
			},
			src: {
				type: String,
				required: true
			},
			price: {
				type: Number,
				required: true
			},
			des: {
				type: Number,
				required: true
			}
		}
	}
</script>

<style>
	.goods {
		display: inline-block;
		width: 250rpx;
	}

	.goods image {
		width: 100%;
		height: 250rpx;
	}

	.goods .flex {
		display: flex;
	}

	.goods .price {
		color: red;
		font-size: 38rpx;
		font-weight: bold;
	}

	.goods .descript {
		font-size: 26rpx;
		color: gray;
 		height: 72rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		/* 多行 */
 		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
</style>
